<template>
  <div class="bg_F4F6F9 center_body">
    <!--加盟商申请模态框-->
    <modalAgent></modalAgent>

    <!--系统列表-->
    <ul class="center_ul bg_fff clear" :style="{height:winHeight - 152 + 'px'}">
      <!--立即开通-->
      <li class="add_function_li" data-toggle="modal" data-target="#myModal">
        <img src="http://image.xuemei99.com/kaitong_icon_personal.png" alt="" class="add_function">
        <span class="font_18 col_2577EF">立即开通</span>
      </li>
      <!--获客系统-->
      <li class="item_function clear" @click='to_huoke' v-show="huoke">
        <div class="system_left_img">
          <img src="http://image.xuemei99.com/huokebao_icon_personal.png" alt="" class="add_function">
        </div>
        <div class="system_center_box">
          <p class="font_18">获客宝已开通</p>
          <p class="font_14 col_666">还有{{huoke_end_time}}天到期</p>
        </div>
        <div class="system_right_btn">
          <button type="button">进入系统</button>
        </div>
      </li>
      <!--销售宝系统-->
      <li class="item_function clear" @click="to_market" v-show="market">
        <div class="system_left_img">
          <img src="http://image.xuemei99.com/xiaoshoubao_icon_personal.png" alt="" class="add_function">
        </div>
        <div class="system_center_box">
          <p class="font_18">销售宝已开通</p>
          <p class="font_14 col_666">还有{{market_end_time}}天到期</p>
        </div>
        <div class="system_right_btn">
          <button type="button">进入系统</button>
        </div>
      </li>
      <!--点击跳转客连客-->
      <li class="item_function clear" @click="show_qrcode_btn('klk')">
        <div class="system_left_img">
          <img src="http://image.xuemei99.com/kelianke_icon_personal.png" alt="" class="add_function">
        </div>
        <div class="system_center_box">
          <p class="font_18">客连客已开通</p>
          <p class="font_14 col_666">永久有效</p>
        </div>
        <div class="system_right_btn">
          <button type="button">进入系统</button>
        </div>
      </li>
      <!--点击跳转推广宝-->
      <li class="item_function clear" @click="show_qrcode_btn('extend')" v-show="extend">
        <div class="system_left_img">
          <img src="http://image.xuemei99.com/tuiguangbao_icon_personal.png" alt="" class="add_function">
        </div>
        <div class="system_center_box">
          <p class="font_18">推广已开通</p>
          <p class="font_14 col_666">还有{{extend_end_time}}天到期</p>
        </div>
        <div class="system_right_btn">
          <button type="button">进入系统</button>
        </div>
      </li>
    </ul>

    <!--底部页脚-->
    <smFoot></smFoot>

    <!--弹出二维码模态框-->
    <div class="modal fade bs-example-modal-sm" id="sm_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
            <p class="modal-title text-left font_14" id="gridSystemModalLabel">手机微信扫描二维码进入系统</p>
          </div>
          <div class="modal-body qrcode_img_box">
            <img src="http://image.xuemei99.com/kelianke_icon_personal.png" id="qrcode_img" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import smFoot from '@/components/foot/sm_foot'
  import modalAgent from '@/components/modal/modal_agent'
  //抛出
  export default {
    name: 'personalCenter',
    //注册组件
    components:{
        modalAgent,
      smFoot
    },
    data(){
      return {
        huoke: true,
        market: true,
        extend: true,
        huoke_end_time:"0",
        market_end_time:'0',
        extend_end_time:"0",
        winHeight:""
      }
    },
    methods: {
      //点击跳转获客宝
      to_huoke(){
        let that = this;
        window.location.href = 'https://www.xuemei99.com/site/get/hkb/url';
//        that.base.ajax_get('/site/get/hkb/url', function (data) {
//          if (data.status == 0) {
////              window.location.href = data
//          } else {
//            alert(data.detail)
//          }
//        })
      },
      //点击跳转销售宝
      to_market(){
        let that = this;
        window.location.href = 'https://www.xuemei99.com/site/get/xsb/url';
//        that.base.ajax_get('/site/get/xsb/url', function (data) {
//          if (data.status == 0) {
//
//          } else {
//            alert(data.detail)
//          }
//        })
      },

      /**
       * 点击可连客/推广宝显示二维码
       * **/
      show_qrcode_btn(type){
        let that = this;
        /**
         * 如果点击的是:
         * klk:可连客
         * extend:推广宝
         * **/
        if (type == 'klk') {
//          window.location.href = 'https://www.xuemei99.com/site/get/xsb/url';
          that.base.ajax_get('/site/get/klk/url', function (data) {
            if (data.status == 0) {
                $("#qrcode_img").attr("src",data.detail);
              $('#sm_modal').modal('toggle');
            } else {
              alert(data.detail)
            }
          })
        }else if (type == 'extend'){
//          that.base.ajax_get('/', function (data) {
//            if (data.status == 0) {
//            $("#qrcode_img").attr("src",data.detail);
//              $('#sm_modal').modal('toggle');
//            } else {
//              alert(data.detail)
//            }
//          })
        }
      },
    },
    //在模板渲染之前调用
    created (){

    },
    //在模板渲染之后调用
    mounted () {
        //计算视窗高
        let window_height = document.documentElement.clientHeight;
        this.winHeight = window_height;
        $("body").css({"height":window_height,"backgroundColor":"#F4F6F9"});
        /**
         * 判断显示对应开通的系统
         * **/
        let that = this;
        that.base.ajax_get('/site/verify/dredge',function (data) {
          if (data.status == 0){
              /**
               * 对应开通：false未开通
               * has_hkb为获客宝，hkb_time：截止时间
               * has_xsb、xsb_time
               * has_tkb、'tkb_time
               * **/
              that.huoke = data.detail.has_hkb;
              that.market = data.detail.has_xsb;
              that.extend = data.detail.has_tkb;
              that.huoke_end_time = data.detail.hkb_time;
              that.market_end_time = data.detail.xsb_time;
              that.extend_end_time = data.detail.tkb_time;
          }else {
              alert(data.detail);
          }
        })
    },
  }


</script>

<style scoped>
  .center_body{
    border: 1px solid rgba(255,255,255,0);
  }
  .center_ul{
    width: 1180px;
    margin: 12px auto;
    padding: 16px 36px 36px 36px;
    box-shadow: 0px 2px 8px #D8DBE2;
    border-radius: 4px;
  }
  .center_ul li{
    width: 316px;
    height: 100px;
    border: 1px solid #E7E9ED;
    border-radius: 4px;
    padding: 20px;
    margin-left: 17px;
    margin-top: 20px;
    text-align: left;
  }
  .center_ul li:hover{
    background-color: #F4F6F9;
    cursor: pointer;
  }
  .add_function_li{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .add_function_li img{
    margin-right: 10px;
  }
  .add_function{
    width: 32px;
  }
  .system_left_img{
    float: left;
    width: 60px;
    height: 60px;
  }
  .system_left_img img{
    width: 100%;
    height: 100%
  }
  .system_center_box{
    padding-left: 10px;
    float: left;
    width: calc(100% - 144px);
  }
  .system_right_btn{
    float: left;
    width: 84px;
  }
  .system_right_btn button{
    width: 84px;
    height: 22px;
    line-height: 20px;
    border: 1px solid #2577EF;
    border-radius: 11px;
    color: #2577EF;
    background-color: #ffffff;
  }
  .qrcode_img_box img{
    width: 100%;
  }
</style>
